<div class="p-trail">
<a href="{$CONTEXT.URL}">Home</a> > 
<a href="{$CONTEXT.URL}products{$CONTEXT.URL_SUFFIX}">Products</a> > 
<a href="{$CONTEXT.URL}c/{$CONTENT.category.categories_link}{$CONTEXT.URL_SUFFIX}">{$CONTENT.category.categories_name}</a> > 
<a href="{$CONTEXT.URL}p/{$CONTENT.item.link}{$CONTEXT.URL_SUFFIX}">{$CONTENT.item.name}</a>
</div>

<div class="p-nav">
<a href="javascript:void(0);"><div class="p-nav-left" id="p-nav-left"></div></a>
<div class="p-nav-items" id="p-nav-items">
<ul>
{section name=item loop=$CONTENT.nav_items}
<li {if $CONTENT.nav_items[item].id == $CONTENT.item.id}class="p-nav-item-active"{/if}><a href="{$CONTEXT.URL}p/{$CONTENT.nav_items[item].link}{$CONTEXT.URL_SUFFIX}" title="{$CONTENT.nav_items[item].name}">{pp_pimage src=$CONTENT.nav_items[item].image url=$CONTEXT.URLBASE path_prefix="===CONFIG_DIR_UPLOADS_THUMBS" width=$CONTENT.nav_items[item].image_width height=$CONTENT.nav_items[item].image_height lw="140" lh="80" alt=$CONTENT.nav_items[item].name}</a>
<span class="t"><a href="{$CONTEXT.URL}p/{$CONTENT.nav_items[item].link}{$CONTEXT.URL_SUFFIX}" title="{$CONTENT.nav_items[item].name}">{$CONTENT.nav_items[item].name}</a></span></li>
{/section}
</ul>
</div>
<a href="javascript:void(0);"><div class="p-nav-right" id="p-nav-right"></div></a>
</div>

{section name=item loop=$CONTENT.nav_items}
{if $CONTENT.nav_items[item].id == $CONTENT.item.id}
<script type="text/javascript" language="javascript">var p_nav_items_ss={$smarty.section.item.index};</script>
{/if}
{/section}

{literal}
<script type="text/javascript" language="javascript">
$(document).ready(function(){
	var p_nav_items_count = $('#p-nav-items li').length;
	var p_nav_items_cc = 0;
	$('#p-nav-items ul').css("width",p_nav_items_count*160+2);
	$('#p-nav-left').hover(function(){$(this).addClass("nav-left-over");},function(){$(this).removeClass("nav-left-over");});
	$('#p-nav-right').hover(function(){$(this).addClass("nav-right-over");},function(){$(this).removeClass("nav-right-over");});
	$('#p-nav-left').click(function(){
			p_nav_items_cc=p_nav_items_cc-1;
			if( p_nav_items_cc < 0 ){
				p_nav_items_cc = 0;
			}
			$('#p-nav-items').animate({scrollLeft: p_nav_items_cc*160}, 
				300, 'swing', //swing/linear, 
				function(){
					// Animation complete.
					})});
	$('#p-nav-right').click(function(){
			p_nav_items_cc=p_nav_items_cc+1;
			if( p_nav_items_cc+4 > p_nav_items_count ){
				p_nav_items_cc = p_nav_items_count-4;
				//p_nav_items_cc = 0;
			}
			$('#p-nav-items').animate({scrollLeft: p_nav_items_cc*160}, 
				300, 'swing', //swing/linear, 
				function(){
					// Animation complete.
					})});
	$('#p-nav-items li').each(function(i){
					$(this).hover(
							function(){$(this).addClass("p-nav-item-over");},
							function(){$(this).removeClass("p-nav-item-over");});
							});
	//
	if(p_nav_items_ss > 0){
		p_nav_items_cc = p_nav_items_ss;
		$('#p-nav-items').scrollLeft(Math.max(0, p_nav_items_cc-1)*160);
	}
});
</script>
{/literal}